<template>
  <div class="upload-container needScrollBar">
    <el-upload
      action="/admin/sys-file/upload"
      :headers="dataObj"
      list-type="text"
      :before-upload="handlebeforeUpload"
      :on-success="handleImageSuccess"
      :file-list="fileList"
      ref="rebateUpload"
      :on-error="onError"
      :on-change="handleChangePic"
      :on-preview="handlePictureCardPreview"
      :before-remove="beforeRemoveFun"
      :on-remove="handleRemove"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>-->
  </div>
</template>

<script>
import { getStore } from "@/util/store";
export default {
  name: "SingleImageUpload3",
  props: {
    value: {
      type: String,
      default: ""
    },
    listType: {
      type: String,
      default: "picture-card"
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tempUrl: "",
      dataObj: { Authorization: "" },
      loading: null,
      dialogImageUrl: "",
      dialogVisible: false,
      uploadList: this.fileList
    };
  },
  computed: {
    imageUrl () {
      return this.value;
    }
  },
  methods: {
    handleRemove (file, fileList) {
      this.uploadList = fileList;
    },
    beforeRemoveFun (file, fileList) {
      if (file.status === "success") {
        return this.$confirm(`确认删除${file.name}吗`, "确认删除");
      }
    },
    rmImage () {
      this.emitInput("");
    },
    emitInput (val) {
      this.$emit("input", val);
    },
    handlePictureCardPreview (file) {
      this.$emit("listClick", file);
    },
    handleChangePic (file, fileList) {
      if (this.isMultiple && fileList.length > 1) {
        fileList.splice(0, 1);
      }
    },
    onError () {
      this.loading.close();
      this.$message({
        message: "上传失败!",
        type: "error"
      });
    },
    handleImageSuccess (response, file, fileList) {
      this.uploadList = fileList;
      this.loading.close();
      this.$emit("successLoad", fileList);
    },
    handlebeforeUpload () {

      return new Promise((resolve, reject) => {
        this.loading = this.$loading({
          lock: true,
          text: "上传中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        this.dataObj.Authorization = "Bearer " + getStore({
          name: "access_token"
        });
        resolve(true);
      });
    }
  }
};
</script>

<style lang="less" scoped>
.upload-container {
  /deep/ .el-upload-list {
    height: 100px;
    overflow: auto;
    overflow-x: hidden;
  }
}
</style>